<template>
  <el-container>

      <el-header style="background-color:#21282b; height: 65px">
        <el-row style="height: 100%" type="flex" align="middle">
          <el-col :span="12">
            <div
              style="
              color: white;
              font-size: 23px;
              letter-spacing:3px;
            "
            >
              <i class="el-icon-s-custom"></i>
              <span>门户系统</span>
            </div>
          </el-col>
          <el-col :span="2" :offset="19">
            <el-button
              type="info"
              style="float: right; padding: 8px 14px"
              @click="loginOut"
            >
              注销
            </el-button>
          </el-col>
        </el-row>
      </el-header>

    <el-main class="main">
      <div class="title">
        <p class="title-text">站内网址</p>
      </div>
      <div class="boxes-list">
        <div class="boxes" v-for="item in subSystems" @click="goTo(item.url)">
          <div class="iconbox">
            <i class="el-icon-platform-eleme" />
          </div>
          <p class="box-title">{{ item.name }}</p>
          <p class="box-detail">{{ item.url }}</p>
        </div>
        <!-- 交差时记得去掉 -->
        <!-- <div
          class="boxes"
          onclick="window.open('https://www.bilibili.com/video/BV1GJ411x7h7?share_source=copy_web')"
        >
          <div class="iconbox">
            <i class="el-icon-platform-eleme" />
          </div>
          <p class="box-title">神秘地址</p>
          <p class="box-detail">无描述</p>
        </div> -->
      </div>
    </el-main>
  </el-container>
</template>


<script>
export default {
  name: "common",

  data() {
    return {
      subSystems: [], // 存储所有的子系统信息
      searchHiddenTag: true,
      user: [],
      questType: "",
    };
  },
  methods: {
    _initSubSystems() {
      this.$axios.get(`/subSystem/all`).then((res) => {
        const data = res.data;
        if (data.code == 200) {
          this.subSystems = data.data;
        } else {
          alert(data.message);
        }
      });
    },
    creatQuest(questType) {
      if (questType == "a") {
        this.goTo();
      }
    },
    goTo(url) {
      if (url == `employee`) {
        var uToken = window.sessionStorage.getItem("token");
        window.location.href="http://localhost:8080/manage/worker?token="+uToken+"";
      } else {
        this.$router.push({
          path: url,
        });
      }
    },
    loginOut() {
      window.sessionStorage.clear("token");
      this.$router
        .push({
          path: `/login`,
        })
        .catch(() => {});
      this.$message({
        message: "退出成功",
        type: "success",
      });
    },
    searchSubSystem() {},
    verifyToken() {
      this.$axios.post(`/user/verify`).then((res) => {
        const postData = res.data;
        if (postData.code != 200) {
          window.sessionStorage.setItem("url", `/common`);
          this.$message.error("请先登录");
          this.$router.push({
            path: `/login`,
          });
        }
        const bUrl = window.location.href;
        console.log(bUrl);
        this.user = postData.data;
        console.log(postData);
      });
    },
  },

  created() {
    this.verifyToken();
    this._initSubSystems();
  },
};
</script>

<style lang="" >
.el-container {
  height: 100%;
}
.user {
  font-size: 20px;
  text-align: right;
  position: relative;
  left: 83%;
  top: -2px;
  display: inline;
  font-weight: 100;
}

.userMenu {
  font-size: 15px;
  text-align: right;
  position: relative;
  left: 85%;
  top: -2px;
  display: inline;
  font-weight: 100;
  color: #fff;
}

.menuInfo {
  font-size: 15px;
  text-align: right;
  position: relative;
  left: 83%;
  top: -2px;
  display: inline;
  font-weight: 100;
  color: #fff;
}

.main {
  //background: #f1f5f8;
  background: url(../../../assets/images/commonbackground.jpg) no-repeat center top;
  width:100%;
  height:100%;  /**宽高100%是为了图片铺满屏幕 */
  overflow: hidden;
}

.title {
  width: 100%;
  height: 50px;
  line-height: 50px;
}

.title-text {
  font-weight: bold;
  font-size: 15pt;
  position: relative;
  margin-left: 30px;
  letter-spacing:5px;
  color: #21282b;
}

.boxes-list {
  width: 100%;
  height: 100%;
  /* background: aqua; */
  margin-top: 10px;
}

.boxes {
  color: black;
  line-height: 100px;
  font-size: 20px;
  float: left;
  width: 350px;
  height: 110px;
  background: #fff;
  border-radius: 5px;
  margin: 5px 20px 50px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  opacity: 0.8;
}
.iconbox {
  height: 100px;
  width: 100px;
  display: inline;
  position: relative;
  left: 20px;
  font-size: 50px;
}
.box-title {
  position: relative;
  left: 30px;
  top: -25px;
  height: 30px;
  margin: 0 0 0;
  display: inline;
}
.box-detail {
  position: relative;
  margin-left: 87px;
  margin-top: -90px;
  height: 20px;
  width: 70px;
  font-weight: 400;
  font-size: 14pt;
  color: dimgrey;
}
</style>
